<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>
<div class="demoTable" style="margin-top: 50px">
    搜索部门名称：
    <div class="layui-inline">
        <input class="layui-input" id="select_input" autocomplete="off">
    </div>
    <button class="layui-btn" id="select_btn" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test">
</table>
</body>
<script src="/layui/layui.all.js"></script>
<script src="/layui/js/jquery-3.5.1.js"></script>
<!--表格工具栏-->
<script type="text/html" id="toolbarDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加一个部门</a>
</script>
<!--表头工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var table = layui.table;
    var laydate = layui.laydate;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;

    table.render({
        elem: '#demo'
        , toolbar: "#toolbarDemo"
        , height: 'full-100'
        , url: '/dlist' //数据接口
        , cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            , {field: 'departmentId', title: 'ID', sort: true, fixed: 'left'}
            , {field: 'departmentname', title: '部门名称'}
            , {field: 'departmentphon', title: '部门电话'}
            , {field: 'describe', title: '部门职责'}
            , {field: 'establish', title: '部门成立时间'}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
        ]]
        , page: {
            limits: [1, 5, 10],
            layout: ['prev', 'page', 'next', 'count', 'limit'],
        } //开启分页
    });

    table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                $.getJSON("/d_del",{"id":data.departmentId},function (data) {
                    if(data){
                        obj.del();
                        layer.close(index);
                        layer.msg("删除成功！");
                    }
                })
            });
        } else if (obj.event === 'edit') {
            /*            console.log(data.departmentname);*/
            layer.open({
                type: 1
                , content: '  <form style="margin: 30px 20px 0 20px" class="layui-form" action="">\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">部门名称</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="d_name" value="' + data.departmentname + '" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">部门电话</label>\n' +
                    '            <div class="layui-input-inline">\n' +
                    '                <input type="text" id="d_phone" value="' + data.departmentphon + '" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '\n' +
                    '\n' +
                    '        <div class="layui-form-item layui-form-text">\n' +
                    '            <label class="layui-form-label">部门职责</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="d_describe" value="' + data.describe + '" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">成立时间</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="create_time" value="' + data.establish + '" autocomplete="off" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </form>'
                , success: function () {
                    laydate.render({
                        elem: '#creat_time' //指定元素
                    });
                }
                , yes: function (index, layero) {
                    var departmentId = data.departmentId;
                    var departmentname = $("#d_name").val();
                    var departmentphon = $("#d_phone").val();
                    var describe = $("#d_describe").val();
                    var establish = $("#create_time").val();

                    $.getJSON("/d_update", {
                        "departmentId": departmentId, "departmentname": departmentname,
                        "departmentphon": departmentphon, "describe": describe, "establish": establish
                    }, function (data) {
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                        table.reload('demo');
                    })
                }
                , title: '编辑界面'
                , maxmin: true
                , area: ['600px', '400px']
                , btn: ['确定', '取消']
            });
        }
    });

    table.on('toolbar(test)', function (obj) {
        switch (obj.event) {
            case 'add': {
                layer.open({
                    type: 1
                    , content: '  <form style="margin: 80px 20px 0 20px" class="layui-form">\n' +
                        '        <div class="layui-form-item">\n' +
                        '            <label class="layui-form-label">部门名称</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                <input type="text" name="d_name" lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '        <div class="layui-form-item">\n' +
                        '            <label class="layui-form-label">部门电话</label>\n' +
                        '            <div class="layui-input-inline">\n' +
                        '                <input type="text" name="d_phone" lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '\n' +
                        '\n' +
                        '        <div class="layui-form-item layui-form-text">\n' +
                        '            <label class="layui-form-label">部门职责</label>\n' +
                        '            <div class="layui-input-block">\n' +
                        '                <input type="text" name="d_describe" lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        ' <div class="layui-form-item layui-hide">\n' +
                        '      <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">\n' +
                        '    </div>'
                    , yes: function (index, layero) {
                        layero.find("#layuiadmin-app-form-submit").click();
                        form.on('submit(layuiadmin-app-form-submit)', function (data) {
                            $.getJSON("/d_add", {
                                "departmentname": data.field.d_name,
                                "departmentphon": data.field.d_phone,
                                "describe": data.field.d_describe
                            }, function (data) {
                            });
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                            table.reload('demo');
                        });
                    }
                    , title: '添加界面'
                    , maxmin: true
                    , area: ['600px', '400px']
                    , btn: ['确定', '取消']
                });
            }
                break;
        }
        ;
    });

    $('#select_btn').on('click', function (data) {
        var d_name = $("#select_input").val();
        table.reload('demo', {
            where: {
                name: d_name
            },
            page: {
                curr: 1
            }
        })
    })
</script>
</html>